<style>
    .in-title-top{height:50px;!important;}
</style>


<div class="miaosha">
    <div class="miaosha-title">
            <p><a href="{:U('Activity/detail',array('id'=>14,'seckill'=>1))}">超值秒杀</a></p>
          <div class="miaosha-time">
            <i>当场剩余时间</i>
              <span style="background-color:#ccc" id="day_show">00</span><i id="day">天</i>
              <span id="hour_show">00</span>:
            <span id="minute_show">00</span>:
            <span id="second_show">00</span>

        </div>
    </div>

    <ul class="miaosha-list">
        <volist name="lists" id="vo">
        <li class="miaosha-li">
            <a href="{:U('Item/detail',array('id'=>$vo['item_id']))}" target="_self">
                <img src="{$vo['cover_path']}" class="img-loaded">
                <div class="miaosha-info">
                    <h3>{$vo.name}</h3>
                <span class="mui-price">
                <i class="mui-price-rmb">¥</i> <span class="mui-price-integer">{$vo.item_price}</span>
                </span>
                </div>
            </a>
        </li>
        </volist>
    </ul>

</div>

<script>
    seajs.use(['jquery','jquery.imglazyload'],function($,lz){
        $.imgLazyLoad({ diff: 100 })
    });
        window.onload = function(){
          //  var intDiff = parseInt(60);//倒计时总秒数量
               var intDiff = parseInt({$lists[0]['remain_time']});
            function timer(intDiff){
                window.setInterval(function(){
                    var day=0,
                            hour=0,
                            minute=0,
                            second=0;//时间默认值
                    if(intDiff > 0){
                        day = Math.floor(intDiff / (60 * 60 * 24));
                        hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                        minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                        second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                    }
					 if (day <=1) {
                        $('#day_show').hide();
                        $('#day').hide();
                    }
                    if (hour <=9) hour = '0' + hour;	
				    if (minute <= 9) minute = '0' + minute;
                    if (second <= 9) second = '0' + second;
                    $('#day_show').html(day);
                    $('#hour_show').html('<s id="h"></s>'+hour);
                    $('#minute_show').html('<s></s>'+minute);
                    $('#second_show').html('<s></s>'+second);
                    intDiff--;
                }, 1000);
            }
            timer(intDiff);
        }
</script>
<style>
.miaosha .miaosha-list .miaosha-li:hover{border: 1px solid #eee}
.miaosha{margin: 20px auto;width: 1200px;height: 400px;}
.miaosha-title{height:150px;padding: 0 15px; background-color: #f0f0f0;padding-top: 20px}
.miaosha-title p{font-size: 24px;color: #404040; font-weight: 700;text-align:center;}
.miaosha-time{width:100%;height: 90px; line-height: 90px;text-align: center;color: #404040;font-size: 30px;font-weight: 700;}
.miaosha-time span{background-color: #404040;padding: 5px 8px;border-radius: 5px;font-weight: 700;color: #fff; font-size: 20px;margin-right: 10px;}
.miaosha-time i{font-size: 18px; color: #404040;font-weight: 400}
.miaosha-list .miaosha-li{width: 25%;display: inline-block;padding-bottom:8px;text-align: center;position: relative;float: left;border: 1px solid #f3f3f3;margin-top: 10px}
.miaosha-list .miaosha-li a{display: block;background: #ffffff;border: rgba(255,255,255,0) 1px solid;position: relative;}
.miaosha-list .miaosha-li img{padding: 0px;width:296px;height:296px}
.miaosha-list .miaosha-info{padding: 0 10px;text-align: left; height: 88px;}
.miaosha-list .miaosha-info h3{font-size: 14px;line-height: 22px;height:48px;width:100%;overflow: hidden}
.miaosha-list .miaosha-info span{font-size: 12px;color: #f77c04;}
.miaosha-list .miaosha-info .mui-price-integer{font-size: 16px;position: relative;top: -2px;}
</style>
